<template>
    <div class="customerserviceVontainer">
        <div>
            <homenav :flag="4"></homenav>
        </div>
        <div class="customerserContent">
            <div class="sildeContainer">
                <el-carousel :height="'300px'" :interval="5000" arrow="hover">
                    <el-carousel-item v-for="(item,index) in slideImgs" :key="index">
                        <el-image :src="item.url"></el-image>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="contentInner">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部工单" name="first">
                        <common :tabledata="commonData"></common>
                    </el-tab-pane>
                    <el-tab-pane label="个人工单" name="second">
                        <personal :tabledata="personnalData"></personal>
                    </el-tab-pane>
                    <el-tab-pane label="创建工单" name="third">
                        <create :orderlist="userOrderList"></create>
                    </el-tab-pane>
                    <el-tab-pane disabled label="管理员工单" name="fourth"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
import homenav from "../common/homenav.vue";
import common from "../servercenter/common.vue";
import personal from "../servercenter/personal.vue";
import create from "../servercenter/create.vue";
export default {
    data() {
        return {
            slideImgs: [
                {
                    url:
                        "https://res.vmallres.com/pimages//sale/2018-11/20181113114642803.png"
                },
                {
                    url:
                        "https://res.vmallres.com/pimages//sale/2018-12/pOwmi029iMQUw7hAMlXe.png"
                },
                {
                    url:
                        "https://res.vmallres.com/pimages//pages/adsImages/dv3JXYR1ouHUgIBjQdt4.jpeg"
                },
                {
                    url:
                        "https://res.vmallres.com/pimages//sale/2019-04/3LP39i3UdxwXc1ioiXFS.jpg"
                }
            ],
            activeName: "first",
            commonData: null,
            personnalData: null,
            userOrderList: []
        };
    },
    methods: {
        // 点击个人工单需要用户认证，否则去登录页面
        handleClick(tab, event) {
            console.log(tab.index);
            let index = tab.index;
            if (index == "1") {
                let mytoken = window.localStorage.getItem("token");
                if (mytoken !== null) {
                    // 进入首页即检测token是否存在，如果存在但无效，则删除token
                    // 所以登录这里判断的时候始终之需要判断token是否存在就可以判断是否有登录
                    this.getPersonalData();
                } else {
                    this.$router.push("loginregister");
                }
            } else if (index == "2") {
                let mytoken = window.localStorage.getItem("token");
                if (mytoken !== null) {
                    let orders = this.$store.state.userOrderList;
                    this.userOrderList = orders;
                    // 进入首页即检测token是否存在，如果存在但无效，则删除token
                    // 所以登录这里判断的时候始终之需要判断token是否存在就可以判断是否有登录
                } else {
                    this.$router.push("loginregister");
                }
            }
        },
        // 获取所有工单列表
        getAll() {
            this.$ajax
                .get("/servercenter/")
                .then(res => {
                    //console.log(res.data.results);
                    let arr = res.data.results;
                    this.commonData = arr;
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 获取个人工单
        getPersonalData() {
            this.$ajax
                .get("/servercenter/?isall=true")
                .then(res => {
                    console.log(res.data.results);
                    let arr = res.data.results;
                    this.personnalData = arr;
                })
                .catch(err => {
                    console.log(err);
                });
        }
    },
    components: {
        homenav,
        common,
        personal,
        create
    },
    mounted() {
        this.getAll();
    }
};
</script>


<style lang="scss" scoped>
.el-carousel__container {
    height: 500px;
}
.el-select {
    width: 130px;
}
.input-with-select,
.el-input-group__prepend {
    background-color: #fff;
}
.customerserviceVontainer {
    padding-top: 80px;
    img {
        width: 100%;
        height: 100%;
    }
    .contentInner {
        width: 60%;
        margin: 0px auto;
        // border: 1px solid red;
    }
}
</style>